<template>
	<div class="container">

		<el-row style="margin-bottom: 15px;">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>胖虎家政</el-breadcrumb-item>
				<el-breadcrumb-item>家政服务</el-breadcrumb-item>
			</el-breadcrumb>
		</el-row>

		<el-row>



			<el-form inline :model="formInline" style="height: 60px;">
				<el-radio-group v-model="domesticStatus">
					<el-radio-button label="全部服务"></el-radio-button>
					<el-radio-button label="上架中"></el-radio-button>
					<el-radio-button label="已下架"></el-radio-button>
				</el-radio-group>

				<el-form-item label="服务名字" style="margin-left: 10px;">
					<el-input v-model="formInline.domesticName" clearable @clear='queryInfo'></el-input>
				</el-form-item>

				<el-form-item label="添加时间">
					<el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" clearable @clear='queryInfo'>
					</el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="queryInfo()">查询</el-button>
				</el-form-item>
			</el-form>

		</el-row>


		<el-row>
			<el-table border :data='list' style="width: 100%;margin-bottom: 20px;" :header-cell-style='headerCellStyle'>
				<el-table-column prop="domesticServiceId" label="服务ID"></el-table-column>
				<el-table-column prop="domesticServiceName" label="服务名字"></el-table-column>

				<el-table-column prop="salesVolume" label="销量"></el-table-column>
				<el-table-column prop="virtualSales" label="虚拟销量"></el-table-column>
				<el-table-column prop="addTime" label="添加时间"></el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<el-tag
							:type="scope.row.domesticServiceStatus==1?'success':'danger'">{{scope.row.domesticServiceStatus==1?'已上架':'已下架'}}
						</el-tag>

					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-link type="primary" :underline='false'
							@click="state(scope.row)">立即{{scope.row.domesticServiceStatus==1?'下架':'上架'}}</el-link><br />
						<el-link type="primary" :underline='false' @click="modify(scope.row)">编辑</el-link>
					</template>
				</el-table-column>
			</el-table>
		</el-row>

		<el-row>

			<el-pagination :current-page=" formInline.pageNum" :page-sizes="[5, 10, 15, 20]"
				:page-size="formInline.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
				@size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>

		</el-row>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				domesticStatus: '全部服务',
				formInline: {
					pageNum: 1,
					pageSize: 10,
					domesticName: '',
					domesticStatus: '',
					startTime: '',
					endTime: '',
				},
				total: 10,
				list: [],
				date: '',
				headerCellStyle: {
					'text-align': 'center',
					'line-height': '30px',
					backgroundColor: '#409EFF',
					color: '#fff'
				},

			}
		},
		methods: {
			queryInfo() {
				this.$http('/domestic/querySearchDomesticServiceList', {
						params: this.formInline
					})
					.then(res => {
						if (res.status == 200) {
							this.list = res.data.data.list
							this.total = res.data.data.total
						} else {
							this.$message({
								type: 'error',
								showClose: 'true',
								message: '服务器请求失败！'
							})
						}
					})
					.catch(() => {
						this.$message({
							type: 'error',
							showClose: 'true',
							message: '服务器异常！'
						})
					})
			},
			handleSizeChange(val) {
				this.formInline.pageSize = val
				this.formInline.pageNum = 1
				this.queryInfo()
			},
			handleCurrentChange(val) {
				this.formInline.pageNum = val
				this.queryInfo()
			},
			state(rowDate) {
				rowDate.domesticServiceStatus = rowDate.domesticServiceStatus == 1 ? 0 : 1
				this.$http.post('/domestic/modifyDomesticService', {
						domesticServiceStatus: rowDate.domesticServiceStatus,
						domesticServiceId: rowDate.domesticServiceId,
					})
					.then(res => {
						if (res.status == 200) {
							this.$message({
								type: 'success',
								showClose: true,
								message: '修改成功',
							})
							this.queryInfo()
						} else {
							this.$message({
								type: 'error',
								showClose: true,
								message: '修改失败'
							})
						}
					})
			},
		},
		mounted() {
			this.queryInfo()
		},
		watch: {
			date(newDate) {
				this.formInline.startTime = newDate[0]
				this.formInline.endTime = newDate[1]
			},
			domesticStatus(newStatus) {
				if (newStatus == '全部服务') {
					this.formInline.domesticStatus = ''
					this.queryInfo()
				} else if (newStatus == '上架中') {
					this.formInline.domesticStatus = 1
					this.queryInfo()
				} else {
					this.formInline.domesticStatus = 0
					this.queryInfo()
				}
			}
		},

	}
</script>

<style>
</style>